<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="lzy">
        <meta charset="utf-8">
        <script src="jquery-3.1.1.js"></script>
        <title></title>
        <style>
            html,body{
                height: 100%;
            }
            body{
                margin: 0;
            }
            #main{
                margin: 10px auto;
                width: 290px;
                height: 380px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                cursor: pointer;
            }
            #main h1{
                margin: 0;
                width: 288px;
                height: 30px;
                text-align: center;
                line-height: 1.5;
                border-bottom: 1px solid black;
                box-sizing: border-box;
                font-size: 18px;
            }
            #main ul{
                list-style: none;
                margin: 0;
                padding: 0;
                margin: auto 10px;
            }
            #main ul li{
                width: 120px;
                height: 75px;
                margin: 5px;
                float: left;
                border: 1px solid gray;
                position: relative;
            }
            #main ul li img{
                width: 120px;
                height:75px;
                position: absolute;
            }
            #main ul li p{
                margin: 0;
                padding: 0;
                width: 120px;
                height: 0;
                position: absolute;
                left: 0;
                top: 38px;
                text-align: center;
                background-color: orange;
                line-height: 75px;
                color: white;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <h1>热门品牌推荐</h1>
            <ul>
                <li>
                    <img src="images/11.jpg" alt="">
                    <p>肌龄</p>
                </li>
                <li>
                    <img src="images/22.jpg" alt="">
                    <p>肌龄</p>
                </li>
                <li>
                    <img src="images/33.jpg" alt="">
                    <p>肌龄</p>
                </li>
                <li>
                    <img src="images/44.jpg" alt="">
                    <p>肌龄</p>
                </li>
                <li>
                    <img src="images/55.jpg" alt="">
                    <p>肌龄</p>
                </li>
                <li>
                    <img src="images/66.jpg" alt="">
                    <p>肌龄</p>
                </li>
                <li>
                    <img src="images/77.jpg" alt="">
                    <p>肌龄</p>
                </li>
                <li>
                    <img src="images/88.jpg" alt="">
                    <p>肌龄</p>
                </li>
            </ul>
        </div>
    </body>
</html>
<script>
    $('#main ul li').hover(function(){
        $(this).children('img').stop().animate({
            height:0,
            top:38,
            bottom:38
        },200);
        $(this).children('p').stop().animate({
            height:75,
            top:0,
            bottom:0
        },200)
    },function(){
        $(this).children('img').stop().animate({
            height:75,
            top:0,
            bottom:0
        },200);
        $(this).children('p').stop().animate({
            height:0,
            top:38,
            bottom:38
        },200)
    })   
</script>